<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="form.contactor_name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="form.phone" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			 <input class="input" type="text" disabled='true' :value="form.address" @click="showModal" data-target="bottomModal" placeholder="收货地址" placeholder-class="placeholder" />  
			 <!-- <view  @click="showModal" data-target="bottomModal" v-text="form.address"></view> -->
			 <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-green">请选择收货地址</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view>
						<areaSelect  @confirm="onCityClick" platform="jd"></areaSelect>
					</view>
				</view>
			</view>
		</view>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input type="text" placeholder="街道门牌信息" v-model="form.street" class="input" />
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="form.is_default == 1" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">保存地址</button>
	</view>
</template>

<script>
	import areaSelect from '@/components/semp-city/semp-city'
	import { mapActions } from 'vuex'
	export default {
		components: {
			areaSelect
		},
		data() {
			return {
				modalName: null,
				form: {
					provinceName: '', //省，
					cityName: '', //城市
					countyName: '', //区
					townName: '', //街道	
					contactor_name: '',
					phone: '',
					address_id: null,
					address: '',
					street: '',
					is_default: 0
				}
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad(option){
			
			// let title = '新增收货地址';
			// if(option.type==='edit'){
			// 	title = '编辑收货地址'
			// 	this.form = JSON.parse(option.data)
			// }
			// this.manageType = option.type;
			// uni.setNavigationBarTitle({
			// 	title
			// })
			// this.getAreas()
		},
		methods: {
			...mapActions(['getUserAddress', 'getAreas']),
			switchChange(e){
				this.form.is_default = e.detail.value ? 1 : 0;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			onCityClick(e) {
				this.form.provinceName=e.province.label;
				this.form.cityName=e.city.label;
				this.form.countyName=e.county.label;
				this.form.townName=e.town.label;
				this.form.address = e.province.label + '-' + e.city.label + '-' + e.county.label + '-' + e.town.label
				this.hideModal();
			},
			//提交
			confirm(){
				let data = this.form;
				if(!data.contactor_name){
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!data.address || !data.address_id){
					this.$api.msg('请在选择所在位置');
					return;
				}
				if(!data.street){
					this.$api.msg('请填写街道信息');
					return;
				}
				this.$http.post('user.address.edit', this.form).then(res => {
					this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
					this.getUserAddress()
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8f8;
		padding-top: 16upx;
		height: 100%;
	}
	// .has-choose-box{
	// 	position: relative;
	// 	bottom: 34upx;
	// }
	.input{
		margin-left: 6upx;
	}	
	.text-green{
		color: #333;	
	}
	.bg-white{
		background: #F8F8F8;
	}
	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: #303133;
		}
		.address-box {
			flex: 1;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: #303133;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: #909399;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		// margin: 60upx auto;
		font-size: 32upx;
		color: #fff;
		background-color: $uni-bt-color;
		border-radius: 10upx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		position: fixed;
		bottom: 3%;
		right: 0;
		left: 0;
		margin: auto;
	}
</style>
